<template>
    <div class="tableListWrap">
        <div class="title">{{ cardItem.titles }}</div>
        <div class="tableListWrap-tableContent">
            <!-- 'calc((100vh - 62px - 40px - 20px - 10px - 30px)/2 - 78px - 20px)' -->
            <a-table :columns="columns" :data-source="dataList" size="small" :pagination="false"
                :scroll="{ y: 'calc(50vh - 78px - 20px)' }"
                :loading="tableLoading"></a-table>

        </div>
        <div class="tableListWrap-pagination">
            <a-pagination show-size-changer :current="page.pageNum" :pageSize="page.pageSize" :total="total"
                @showSizeChange="onShowSizeChange" :loading="tableLoading" @change="change" size="small"
                :disabled="tableLoading" />
        </div>
    </div>
</template>

<script>
import { columns } from './static';

export default {
    name: 'TableList',
    props: {
        processData: {
            type: Object,
        },
        cardItem: {
            type: Object,
        }
    },
    data() {
        return {
            columns,
            page: {
                pageSize: 20,
                pageNum: 1,
            },
            total: 0,
            dataList: [],
            tableLoading: false,
        }
    },
    methods: {
        getList(aParams) {
            let params = {
                ...this.page,
                ...this.processData,
                ...aParams,
            };
            this.tableLoading = true;
            this.getAxios(this.$inspectionExcavationDescPeople, params).then((res) => {
                if (res.code == 200) {
                    let data = res.data;
                    this.dataList = data.records;
                    this.total = data.total;
                }
            }).catch(() => {
            }).finally(() => {
                this.tableLoading = false;
            })
        },
        onShowSizeChange(current, size) {
            this.page = {
                ...this.page,
                pageSize: size,
                pageNum: current,
            }
            this.getList(this.page);
        },
        change(page, pageSize) {
            this.page = {
                ...this.page,
                pageSize: pageSize,
                pageNum: page,
            }
            this.getList(this.page);
        }
    },
    mounted() {
        this.page = {
            ...this.page,
            pageSize: 20,
            pageNum: 1,
        }
        this.dataList = [];
        let statD = this.processData
        if (statD['company'] && statD['selectDate']) {
            this.getList(statD);
        }

    },
}
</script>

<style lang="less" scoped>
.tableListWrap {
    width: 100%;
    height: 100%;
    position: relative;

    .title {
        position: relative;
        top: -6px;
        text-align: center;
        font-weight: 560;
    }

    ::v-deep {

        /* 修改表头背景色 */
        .ant-table-thead>tr>th {
            background-color: #f5f7fa !important;
            border-bottom: none;
        }
    }

    &-tableContent {
        // height: calc((100vh - 62px - 40px - 20px - 10px - 30px)/2 - 42px - 20px);
        height: calc(50vh - 42px - 20px);

    }

    &-pagination {
        height: 28px;
        width: 100%;
        display: flex;
        justify-content: right;
        align-items: center;
    }
}
</style>